<template>
    <div class="qrcode-page">
        <div class="section-title">二维码</div>

        <!-- 二维码展示区域 -->
        <div class="qrcode-container">
            <div v-if="qrcodeData.url" class="qrcode-content">
                <img :src="qrcodeData.url" :alt="qrcodeData.name" class="qrcode-image" />
                <div class="qrcode-info">
                    <p class="qrcode-name">{{ qrcodeData.name }}</p>
                    <van-button type="primary" @click="downloadQRCode">下载二维码</van-button>
                </div>
            </div>
            <div v-else class="no-data">暂无二维码</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFilePathById } from '../api/uploadFliePath'


// 二维码相关数据
const qrcodeData = ref<{
    name: string
    url: string
}>({
    name: '',
    url: ''
})

// 下载二维码
const downloadQRCode = () => {
    if (qrcodeData.value.url) {
        window.open(qrcodeData.value.url, '_blank')
    }
}

// 获取二维码数据
const fetchQRCode = async (id: any) => {
    if (!id || id === 'undefined') {
        console.warn("无效的ID参数:", id)
        return
    }

    try {
        const basicUrl = "https://www.jyszprd.com/h5-api/"
        const response: any = await getFilePathById(id)

        if (response.data && response.data.image) {
            qrcodeData.value = {
                name: response.data.image.split('/').pop() || "二维码.png",
                url: basicUrl + response.data.image
            }
        }
    } catch (err) {
        console.log("获取二维码失败", err)
    }
}

onMounted(async () => {
    let user = JSON.parse(localStorage.getItem('user')!)
    await fetchQRCode(user.enterpriseId)
})
</script>

<style scoped>
.qrcode-page {
    padding: 10px;
    min-height: 100vh;
}

.section-title {
    text-align: center;
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 10px;
    margin: 10px 0;
    font-size: 16px;
    width: 90vw;
}

.qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.qrcode-content {
    text-align: center;
}

.qrcode-image {
    max-width: 300px;
    height: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 20px;
}

.qrcode-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.qrcode-name {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.no-data {
    text-align: center;
    padding: 20px;
    color: #999;
}
</style>